<!doctype html>
<!--
@license
Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
  <meta charset="utf-8">
  <script src="../../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
  <script src="wct-browser-config.js"></script>
  <script src="../../node_modules/wct-browser-legacy/browser.js"></script>
  <script type="module" src="../../polymer-legacy.js"></script>
</head>
<body>
  <custom-style>
    <style is="custom-style">
      unknown-host {
        display: block;
      }

      html {
        --border: 2px solid steelblue;
        --mixin: {
          color: blue;
        };
      }
    </style>
  </custom-style>

  <script type="module">
'use strict';
class UnknownHost extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({mode: 'open'});
  }
}
customElements.define('unknown-host', UnknownHost);
</script>

  <dom-module id="x-foo">
    <template>
    <style>
      :host {
        border: var(--border);
        display: block;
        @apply --mixin;
      }
    </style>
      x-foo
    </template>
    <script type="module">
import { Polymer } from '../../polymer-legacy.js';
Polymer({
  is: 'x-foo'
});
</script>
  </dom-module>

  <dom-module id="x-nest">
    <template>
    <style>
      :host {
        --border: 4px solid tomato;
      }
    </style>
      <unknown-host id="unknown"></unknown-host>
    </template>
    <script type="module">
import { Polymer } from '../../polymer-legacy.js';
Polymer({
  is: 'x-nest',

  attached: function() {
    this.$.unknown.shadowRoot.appendChild(document.createElement('x-foo'));
  }
});
</script>
  </dom-module>

  <script type="module">
suite('scoped-styling-unknown-host', function() {

  function assertComputed(element, value, pseudo) {
    var computed = getComputedStyle(element, pseudo);
    assert.equal(computed['border-top-width'], value, 'computed style incorrect');
  }

  /* eslint-disable no-unused-vars */
  function assertStylePropertyValue(properties, name, includeValue) {
    assert.property(properties, name);
    assert.include(properties[name], includeValue);
  }
  /* eslint-enable no-unused-vars */

  test('element in top level unknown host styled via property defaults', function() {
    var host = document.createElement('unknown-host');
    var foo = document.createElement('x-foo');
    host.shadowRoot.appendChild(foo);
    document.body.appendChild(host);
    if (window.ShadyDOM) {
      ShadyDOM.flush();
    }
    assertComputed(foo, '2px');
  });

  test('element in unknown host styled via containing polymer element', function() {
    var n = document.createElement('x-nest');
    document.body.appendChild(n);
    if (window.ShadyDOM) {
      ShadyDOM.flush();
    }
    if (window.customElements.flush) {
      customElements.flush();
    }
    var foo = n.$.unknown.shadowRoot.querySelector('x-foo');
    assertComputed(foo, '4px');
  });

});
</script>


</body>
